<mk-drawer-form
    v-model="drawer"
    :loading="drawerLoading"
    :title="typeof drawerData.id === 'undefined' ? '添加' : '编辑'"
    @save="saveDrawer()">
    <el-tabs type="card" v-model="drawerActiveName">
        <el-tab-pane label="基本信息" name="info">
            <el-form
                :model="drawerData" 
                ref="drawerData" 
                :rules="drawerRules" 
                label-width="120px">
                <el-form-item label="名称：" prop="title">
                    <el-input 
                        v-model="drawerData.title" 
                        placeholder="请输入名称" 
                        maxlength="255" 
                        show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="类型：" prop="type">
                    <el-select 
                        v-model="drawerData.type" 
                        filterable 
                        placeholder="请选择分类类型" 
                        @change="typeChange()">
                        <el-option
                            v-for="(item, index) in option"
                            :key="index"
                            :label="item.title"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="路由：" prop="seo_url" v-if="drawerData.links_type === 0">
                    <el-input
                        v-model="drawerData.seo_url" 
                        placeholder="只能是字母、数字、下划线、-组合" 
                        minlength="3" 
                        maxlength="255" 
                        show-word-limit>
                    </el-input>
                    <span v-if="drawerData.type === 'page'">页面分类链接会自动生成对应文件</span>
                </el-form-item>
                <el-form-item label="父级：" prop="pid">
                    <el-select v-model="drawerData.pid" filterable placeholder="输入文字可搜索父级">
                        <el-option
                            v-for="(item, index) in tableTreeString"
                            :key="index"
                            :label="item.title"
                            :value="item.id">
                            <span v-html="item.treeString" class="mk-tree-name"></span>
                            {{ item.title }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="封面：" prop="cover">
                    <mk-file-select v-model="drawerData.cover"></mk-file-select>
                </el-form-item>
                <el-form-item label="导航栏显示：" prop="show">
                    <el-select v-model="drawerData.show" placeholder="请选择">
                        <el-option
                            v-for="item in showList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户权限：" prop="group_id">
                    <el-select v-model="drawerData.group_id" placeholder="为空则所有用户都能访问，可多选" filterable multiple>
                        <el-option
                            v-for="(item, index) in group"
                            :key="index"
                            :label="item.title"
                            :value="item.id">
                            <span v-html="item.treeString" class="mk-tree-name"></span>
                            {{ item.title }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="链接类型：" prop="links_type" v-if="drawerData.type === 'page'">
                    <el-select v-model="drawerData.links_type" placeholder="请选择">
                        <el-option
                            v-for="item in linksTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="链接地址：" prop="links_value" v-if="drawerData.links_type === 1">
                    <mk-link v-model="drawerData.links_value"></mk-link>
                </el-form-item>
                <el-form-item label="标识：" prop="num">
                    <el-input type="number" v-model="drawerData.num" placeholder="请输入分类标识" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input type="number" v-model.number="drawerData.sort" placeholder="请输入分类排序" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-switch
                        v-model="drawerData.status"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="手机栏目：" prop="mobile">
                    <el-switch
                        v-model="drawerData.mobile"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="内容描述：" prop="content" v-if="drawerData.links_type === 0">
                    <mk-editor v-model="drawerData.content"></mk-editor>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="自定义字段" name="field">
            <mk-field v-model="drawerData.field" search></mk-field>
        </el-tab-pane>
        <el-tab-pane label="TDK设置"  name="seo" v-if="drawerData.links_type === 0">
            <p class="website-title">TDK<span class="tips">（非专业优化人员,请勿修改）</span></p>
            <el-form
                label-width="150px"
                :rules="drawerRules">
                <el-form-item label="SEO标题：" prop="seo_title">
                    <el-input v-model="drawerData.seo_title" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="SEO关键词：" prop="seo_keywords">
                    <el-input v-model="drawerData.seo_keywords" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="SEO描述：" prop="seo_description">
                    <el-input 
                        type="textarea"
                        v-model="drawerData.seo_description" 
                        maxlength="255" 
                        show-word-limit>  
                    </el-input>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</mk-drawer-form>